Estoy construyendo un sitio web que obtiene imágenes de la API de la NASA. Ahora, me gustaría agregar una descripción a esas imágenes, pero no quiero que se muestre toda la descripción. Por lo tanto, quiero agregarle un botón/enlace para leer más. El contenido del texto (o descripción de la imagen) cambiará todos los días. Y entonces no sé en qué palabra poner el botón. ¿Hay alguna forma de que pueda poner el botón después de cierto número de filas?
Cualquier ayuda o entrada es muy apreciada, gracias.
Puede almacenar el contenido de texto completo en un atributo de datos y luego mostrarlo una vez que se hace clic en el botón.
Simplemente base si hay o no un botón de leer más en la longitud de la cadena de descripción proporcionada por la API.
<div id="main"></div> <script> const main = document.querySelector('#main'); const posts = [ { image: 'https://www.mobiltech.cz/wp-content/uploads/2021/04/placeholder-2.png', description: 'Long description lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, augue ac feugiat venenatis, eros tortor fringilla leo, quis posuere dui lectus in velit. Suspendisse consectetur orci quis elit congue mollis. Cras eget lorem faucibus, dictum nisi eget, elementum velit. Integer imperdiet hendrerit velit, id porttitor nunc vestibulum vel. Integer ut congue lectus, id ullamcorper neque. Curabitur non pharetra urna, ac euismod magna. Proin sit amet mollis leo. Vestibulum in nunc sed mi feugiat pellentesque. Donec vel molestie lacus. Nam dictum imperdiet tortor pellentesque posuere. Nullam arcu nisl, rhoncus hendrerit condimentum et, bibendum porta sapien.', }, { image: 'https://www.mobiltech.cz/wp-content/uploads/2021/04/placeholder-2.png', description: 'Short description.', }, { image: 'https://www.mobiltech.cz/wp-content/uploads/2021/04/placeholder-2.png', description: 'Medium description length. lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tristique, augue ac feugiat venenatis,', }, ]; const createPost = ({ image, description }) => { const div = document.createElement('div'); const img = document.createElement('img'); img.setAttribute('src', image); img.style.maxWidth = 200 + 'px'; const text = document.createElement('p'); div.appendChild(img); if (description.length > 50) { text.innerText = `${description.slice(0, 50)}...`; text.setAttribute('data-full', description); const btn = document.createElement('button'); btn.innerText = 'Read more...'; btn.setAttribute('onclick', 'displayPost(this)'); div.appendChild(text); div.appendChild(btn); return div; } text.innerText = description; div.appendChild(text); return div; }; posts.forEach((post) => { const element = createPost(post); main.appendChild(element); }); const displayPost = (elem) => { elem.previousSibling.innerText = elem.previousSibling.getAttribute('data-full'); elem.remove(); }; </script>Agregue 2 elementos y coloque parte del texto hasta la fila en la que desea que esté el botón usando JavaScript (lo diré más adelante), agregue visibilidad: "oculto" como una de las propiedades del div2 después de usar el Javascript , agregue el botón leer más después del primer div y antes del segundo div, agregue onclick:"document.getElementById("idOfThe2ndDiv).visibility = "visible"; " al botón. Ahora te diré cómo usar el JavaScript.
var text = "lorem ipsum dolor sit amet" //make the text the description of the image var part1 = text.slice(0, num); //replace num with the amount of characters you want var part2 = text.slice(num); document.getElementById("idOfThe1stDiv").InnerHTML = part1; document.getElementById("idOfThe2ndDiv").innerHTML = part2;